<template>
  <div class="warehouse_order_info">
    <div class="header_title_box">
      <h2>基本信息</h2>
    </div>
    <el-form :model="warehouseOrderInfo">
      <div class="select_form_box">
        <div class="filter-container">
          <el-row v-for="(item, index) in baseFieldsArr" :key="index" :gutter="30">
            <el-col v-for="i in item" :key="i.id" :span="8">
              <el-form-item :label="i.label" label-width="97px">
                <el-input v-model="warehouseOrderInfo[i.prop]" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-form>
    <div class="header_title_box">
      <h2>商品明细信息</h2>
    </div>
    <div class="mb24">
      <el-table :data="products" border max-height="190">
        <el-table-column label="缩略图" align="center" prop="goods_pic" width="190">
          <template slot-scope="scope">
            <thund :img="scope.row.goods_pic | shopThund" />
          </template>
        </el-table-column>
        <el-table-column label="系统sku" align="center" prop="goods_code" width="125" />
        <el-table-column :label="numberDesc.label" align="center" :prop="numberDesc.prop" width="169" />
        <el-table-column label="中文名称" align="center" prop="goods_name" width="144" />
        <el-table-column label="英文名称" align="center" prop="goods_name_en" min-width="164" />
        <el-table-column label="包装方式" align="center" width="169">
          <template slot-scope="scope">
            <dic-values :dictionaries="DICTIONARIES.auditStatus" :code="scope.row.type" />
          </template>
        </el-table-column>
        <el-table-column label="商品分类" align="center" prop="category_name" width="205" />
      </el-table>
    </div>
    <template v-if="showParts">
      <div class="header_title_box">
        <h2>配件明细信息</h2>
      </div>
      <div class="mb24">
        <el-table :data="parts" border max-height="190">
          <el-table-column label="缩略图" align="center" prop="goods_pic" min-width="190">
            <template slot-scope="scope">
              <thund :img="scope.row.goods_pic | shopThund" />
            </template>
          </el-table-column>
          <el-table-column label="系统sku" align="center" prop="goods_code" min-width="125" />
          <el-table-column :label="numberDesc.label" align="center" :prop="numberDesc.prop" min-width="169" />
          <el-table-column label="中文名称" align="center" prop="goods_name" min-width="144" />
          <el-table-column label="商品分类" align="center" prop="category_name" min-width="205" />
        </el-table>
      </div>
    </template>
  </div>
</template>

<script>
import thund from '../../../components/base/thund'
import dicValues from '../../../components/dicTransform/index'
export default {
  name: 'WarehouseOrderInfo',
  components: {
    thund,
    dicValues
  },
  props: {
    warehouseOrderInfo: {
      // 订单详情
      type: Object,
      default() {
        return {}
      }
    },
    baseFields: {
      // 基本信息字段
      type: Array,
      default() {
        return []
      }
    },
    numberDesc: {
      type: Object,
      default() {
        return {}
      }
    },
    // 显示配件信息
    showParts: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      DICTIONARIES: {
        auditStatus: [
          // 商品所属客户类型 0-内部员工 1-客户商品
          {
            code: 1,
            name: '普通商品'
          },
          {
            code: 2,
            name: '多箱包装'
          }
        ]
      }
    }
  },
  computed: {
    baseFieldsArr() {
      const vm = this
      const arr = []
      for (var i = 0; i < vm.baseFields.length; i += 3) {
        arr.push(vm.baseFields.slice(i, i + 3))
      }
      return arr
    },
    // 商品列表
    products() {
      return this.warehouseOrderInfo.products
    },
    // 配件列表
    parts() {
      return this.warehouseOrderInfo.parts
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.warehouse_order_info .filter-container {
  padding-bottom: 0;
  border: none;
}
.warehouse_order_info ::v-deep .el-form-item {
  margin-bottom: 24px;
}
</style>
